<template>
  <header class="px-4 sticky top-0 bg-white z-10 header-box">
    <div
      class="flex justify-between items-center relative max-w-screen-2xl mx-auto"
    >
      <div class="header-left flex py-4">
        <NuxtLink to="/" class="logo">
          <img src="/assets/images/logo.png" alt="" class="w-28 lg:w-56" />
        </NuxtLink>
      </div>
      <nav class="nav-box grow lg:px-4 xl:px-16 hidden lg:block">
        <ul class="flex xl:gap-5 items-center">
          <li v-for="item in navList" class="lg:w-20 xl:w-24 nav-item">
            <h4>
              <NuxtLink
                class="title"
                :class="{
                  'bg-primary text-white': item.label == navCurrentParentName,
                }"
                :to="item.url"
              >
                {{ item.label }}
              </NuxtLink>
            </h4>
            <div
              class="subnav-box absolute lg:-left-4 xl:-left-0 w-screen max-w-screen-2xl lg:px-56"
              v-if="item.children.length > 0"
            >
              <ul class="py-4 w-full grid grid-cols-4 gap-4 lg:px-4 xl:ml-16">
                <li v-for="items in item.children" class="subnav-item">
                  <NuxtLink :to="items.url">
                    <span>{{ items.label }}</span>
                    <i class="arrow-icon"></i>
                  </NuxtLink>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </nav>
      <div class="header-right">
        <!--搜索框-->
        <div class="hidden lg:block">
          <el-input
            style="width: 200px"
            placeholder="搜索"
            :suffix-icon="Search"
          />
        </div>
        <!--移动端按钮-->
        <div
          class="w-9 h-10 cursor-pointer flex flex-col items-center justify-center lg:hidden"
          @click="onNavShow"
        >
          <div
            class="w-[80%] h-[2px] bg-[#009ca3] rounded-sm transition-all duration-300 origin-left translate-y-[0.70rem] peer-checked:rotate-[-45deg]"
          ></div>
          <div
            class="w-[80%] h-[2px] bg-[#009ca3] rounded-md transition-all duration-300 origin-center peer-checked:hidden"
          ></div>
          <div
            class="w-[80%] h-[2px] bg-[#009ca3] rounded-md transition-all duration-300 origin-left -translate-y-[0.70rem] peer-checked:rotate-[45deg]"
          ></div>
        </div>
      </div>
    </div>
  </header>
  <!-- 移动端菜单 -->
  <div class="lg:hidden">
    <el-drawer
      v-model="navOpen"
      direction="ltr"
      :with-header="false"
      :show-close="false"
      size="60%"
    >
      <el-menu :default-active="navActive">
        <el-sub-menu :index="item.label" v-for="item in navList">
          <template #title>
            <span>{{ item.label }}</span>
          </template>
          <el-menu-item
            :index="items.label"
            v-for="items in item.children"
            @click="handleClick(items)"
            >{{ items.label }}</el-menu-item
          >
        </el-sub-menu>
      </el-menu>
    </el-drawer>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
const navList = useNav();
// 移动端
// 菜单
const navOpen = ref(false);
const navActive = ref("");
const onNavShow = () => {
  navOpen.value = !navOpen.value;
};
const onClose = () => (navOpen.value = false);
// 菜单选中
const router = useRouter();
const handleClick = (menuInfo) => {
  navOpen.value = false;
  // 移动端菜单选中
  router.push({ path: menuInfo.url });
};
// nuxt 获取当前路由，根据当前路由获取对应的菜单名称
const route = useRoute();
const navCurrentParentName = ref();
watchEffect(() => {
  let navCurrentName = "";
  const navCurrentParent = route.matched[0];
  navList.value.forEach((item) => {
    if (navCurrentParent.path === item.url) {
      navCurrentParentName.value = item.label;
    }
    if (item.url === route.path) {
      navCurrentName = item.label;
    }
    if (item.children.length > 0) {
      item.children.forEach((chilItem) => {
        if (chilItem.url === route.path) {
          navCurrentName = chilItem.label;
        }
      });
    }
  });
  useSeoMeta({
    title: navCurrentName,
  });
  // 移动端菜单选中
  navActive.value = navCurrentName;
});
</script>
<style scoped lang="scss">
.header-box {
  box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
}
/* 头部css开始 */
.header-left {
  background: #fff;
  position: relative;
  float: left;
  .logo {
    display: block;
  }
}
// 菜单
.nav-box {
  height: 90px;
  .nav-item {
    .title {
      display: block;
      line-height: 90px;
      cursor: pointer;
      text-align: center;
    }
    .subnav-box {
      display: none;
      background-color: rgba(22, 156, 162, 0.8);
      .subnav-item {
        color: #c1e9eb;
        cursor: pointer;

        .arrow-icon {
          margin-left: 10px;
          display: inline-block;
          width: 9px;
          height: 9px;
          border-right: 1px solid #c1e9eb;
          border-top: 1px solid #c1e9eb;
          border-left: 0;
          border-bottom: 0;
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
          vertical-align: middle;
        }

        &:hover {
          color: #fff;
        }
      }
    }
    &.active,
    &:hover {
      background-color: rgba(22, 156, 162, 0.8);
      color: #fff;
      .subnav-box {
        display: block;
      }
    }
  }
}
//  移动端
</style>
<style>
.el-drawer__body {
  padding: 0;
}
</style>
